<ng-container *ngIf="showList">
<div class="page-title clearfix">
  <div class="title">${notes}管理</div>
  <button nz-button class="fr btn-green" [routerLink]="routerLinks.${classNameLower}.add" title="添加">
    <i nz-icon type="plus" theme="outline"></i>
    添加
  </button>
</div>

<div class="panel panel-body">
  <!--搜索 start-->
  <form nz-form (submit)="query${className}List(1)">
    <#list fields as field>
    <#if (field.isQueryRequired)>
    <div class="search-group">
      <span class="search-title">${field.displayName}：</span>
      <div class="search-main">
        <#if (field.checkState || field.displayType == 'Select')>
        <nz-select name="${field.field}" [(ngModel)]="searchParams.${field.field}" nzAllowClear
                   nzPlaceHolder="${field.field}">
          <nz-option [nzValue]="'value'" [nzLabel]="'label'"></nz-option>
        </nz-select>
        <#elseif (field.displayType == 'Cascader')>
        <nz-cascader name="${field.field}"
          [nzOptions]="options"
          [(ngModel)]="searchParams.${field.field}"
          (ngModelChange)="onChanges($event)">
        </nz-cascader>
        <#elseif (field.displayType == 'Radio')>
        <nz-radio-group name="${field.field}" [(ngModel)]="searchParams.${field.field}" [nzButtonStyle]="'solid'">
          <label nz-radio-button nzValue="A">选项1</label>
          <label nz-radio-button nzValue="B">选项2</label>
        </nz-radio-group>
        <#elseif (field.checkDate || field.displayType == 'DatePicker')>
        <nz-range-picker name="${field.field}" [(ngModel)]="searchParams.${field.field}" (ngModelChange)="dateChange($event)" [nzFormat]="'yyyy-MM-dd'"></nz-range-picker>
        <#elseif (field.displayType == 'TimePicker')>
        <nz-time-picker name="${field.field}" [(ngModel)]="searchParams.${field.field}" (ngModelChange)="timeChange($event)"></nz-time-picker>
        <#else>
        <input nz-input name="${field.field}"
               [(ngModel)]="searchParams.${field.field}"
               placeholder="${field.displayName}">
        </#if>
      </div>
    </div>
    </#if>
    </#list>
    <div class="inline-block">
      <button nz-button class="ml-20 mr" [nzType]="'primary'" title="搜索" type="submit">
        <i nz-icon type="search" theme="outline"></i><span>搜索</span>
      </button>
      <button nz-button class="mr" title="重置" type="reset" (click)="resetSearch()">
        <i nz-icon type="sync" theme="outline"></i><span>重置</span>
      </button>
    </div>
  </form>
  <!--搜索 end-->
</div>
<div class="panel">
  <nz-table #nzTable
            [nzData]="${classNameLower}List.voList"
            [nzLoading]="_loading"
            [nzFrontPagination]="false"
            [nzShowTotal]="totalRow"
            [nzPageSize]="${classNameLower}List.pageSize"
            [nzTotal]="${classNameLower}List.totalRow"
            [nzPageIndex]="${classNameLower}List.curPage"
            (nzPageIndexChange)="query${className}List($event)">
    <thead>
    <ng-template #totalRow>共{{${classNameLower}List.totalRow}}条</ng-template>
    <tr>
      <th class="text-center" nzWidth=""><span>序号</span></th><!--序号-->
      <#list fields as field>
      <#if (field.isListPageDisplay)>
      <th class="text-center" nzWidth=""><span>${field.displayName}</span></th><!--${field.displayName}-->
      </#if>
      </#list>
      <th class="text-center" nzWidth=""><span>操作</span></th><!--操作-->
    </tr>
    </thead>
    <tbody>
    <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
      <tr>
        <td class="text-center">{{i+1}}</td>
        <#list fields as field>
        <#if (field.isListPageDisplay)>
        <#if (field.checkState)>
        <td class="text-center">
          <nz-switch class="thc" [ngModel]="data.state === states.enable" [ngModelOptions]="{standalone: true}"
                     (ngModelChange)="modify${className}State(data.code, $event)"
                     [nzCheckedChildren]="checkedTemplate" [nzUnCheckedChildren]="unCheckedTemplate"></nz-switch>
          <ng-template #checkedTemplate><i nz-icon type="check" theme="outline"></i></ng-template>
          <ng-template #unCheckedTemplate><i nz-icon type="close" theme="outline"></i></ng-template>
        </td>
        <#elseif (field.displayType == 'Website')>
        <td class="text-center"><a [href]="data.${field.field}">{{data.${field.field}}}</a></td>
        <#elseif (field.displayType == 'Rate')>
        <td class="text-center"><nz-rate [ngModel]="data.${field.field}" nzDisabled></nz-rate></td>
        <#else>
        <td class="text-center">{{data.${field.field}}}</td>
        </#if>
        </#if>
        </#list>
        <td class="text-center">
          <button nz-button class="btn-blue-o mr" [routerLink]="[routerLinks.${classNameLower}.modify,data.code]"
                  title="修改">
            <i nz-icon type="edit" theme="outline"></i>
          </button>
          <button nz-button class="btn-success-o" [routerLink]="[routerLinks.${classNameLower}.detail,data.code]"
                  title="查看">
            <i nz-icon type="eye" theme="outline"></i>
          </button>
        </td>
      </tr>
    </ng-template>
    </tbody>
  </nz-table>
</div>
</ng-container>

<!--路由嵌套 begin-->
<router-outlet (activate)="activate($event)" (deactivate)="onDeactivate($event)"></router-outlet>
<!--路由嵌套 end-->
